<html>
<body>
<h1>hello word!!!</h1>
<p>this is a html page</p>

<div class="search-area">
  <form @submit.prevent="onSearch">
    <el-input v-model="query.title" placeholder="图书名" class="search-input"/>
    <el-input v-model="query.author" placeholder="作者" class="search-input"/>
    <el-input v-model="query.isbn" placeholder="ISBN号" class="search-input"/>
    <el-input v-model="query.publisher" placeholder="出版社" class="search-input"/>
    <el-input v-model="query.title" placeholder="图书名" class="search-input"/>
    <el-select v-model="query.categoryId" placeholder="类别" class="search-input">
      <el-option v-for="category in categories" :key="category.categoryId"
                 :label="category.categoryName " :value="category.categoryId">
        {{ category.categoryName }}
      </el-option>
    </el-select>
    <el-select v-model="query.status" placeholder="图书状态" class="search-input">

      <el-option label="未上架" value="0"/>
      <el-option label="在馆" value="0"/>
      <el-option label="借出" value="2"/>
    </el-select>

    <el-button type="submit"><i class="fa-solid fa-magnifying-glass"></i></el-button>
    <el-button @click="onReset"><i class="fa-solid fa-rotate-right"></i> 重置</el-button>
  </form>
</div>
<div class="button-area">
  <el-button type="primary">
    <i class="fa-solid fa-plus"></i> 新增
  </el-button>
  <el-button type="danger">
    <i class="fa-solid fa-trash"></i> 删除
  </el-button>
  <el-button type="success">
    <i class="fa-solid fa-upload"></i> 上架
  </el-button>
</div>


<div class="search-area">
  <el-form :inline="true" :model="query" class="demo-form-inline">
    <el-input v-model="title" placeholder="图书名" class="search-input"/>
    <el-input v-model="author" placeholder="作者" class="search-input"/>
    <el-input v-model="isbn" placeholder="ISBN号" class="search-input"/>
    <el-input v-model="publisher" placeholder="出版社" class="search-input"/>
    <el-input v-model="title" placeholder="图书名" class="search-input"/>
    <el-select v-model="categoryId" placeholder="类别" class="search-input">
      <el-option v-for="category in categories" :key="category.categoryId"
                 :label="category.categoryName " :value="category.categoryId"></el-option>
    </el-select>

    <el-select placeholder="图书状态" class="search-input">
      <el-option label="未上架" value="0"></el-option>
      <el-option label="在馆" value="1"></el-option>
      <el-option label="借出" value="2"></el-option>
    </el-select>

    <el-button type="primary" @click="onSubmit">Query</el-button>
  </el-form>
</div>

<el-table :data="books" stripe style="width: 100%">
  <el-table-column prop="title" label="书名"/>
  <el-table-column prop="author" label="作者"/>
  <el-table-column prop="isbn" label="ISBN"/>
  <el-table-column prop="publisher" label="出版社"/>
  <el-table-column prop="publicationYear" label="出版年份" width="90"/>
  <el-table-column prop="language" label="语言" width="60"/>
  <el-table-column prop="location" label="位置"/>
  <el-table-column label="状态" width="60">
    <template #default="scope">
      {{ getStatusText(scope.row.status) }}
    </template>
  </el-table-column>
  <el-table-column label="封面" style="padding: 0px" width="70">
    <template #default="scope">
      <div v-if="scope.row.coverUrl">
        <el-image :src="scope.row.coverUrl" alt="封面预览" fit="fill"
                  style="max-width: 50px; max-height: 50px;"/>
      </div>
      <div v-else>无</div>
    </template>
  </el-table-column>
  <el-table-column prop="description" label="描述"/>
  <el-table-column label="附件">
    <template #default="scope">
      <div v-if="scope.row.attachmentUrl">
        <a :href="scope.row.attachmentUrl" target="_blank">预览</a>
        <a :href="scope.row.attachmentUrl" download style="margin-left: 8px">下载</a>
      </div>
      <div v-else>无</div>
    </template>
  </el-table-column>
  <el-table-column label="操作" fixed="right">
    <template #default="scope">
      <el-button type="text"
                 @click="$emit('edit', scope.row)"></i><span style="margin-left: 1px">编辑</span>
      </el-button>
      <el-button type="text"
                 @click="$emit('edit', scope.row)"></i><span style="margin-left: 1px">删除</span>
      </el-button>
    </template>
  </el-table-column>
</el-table>

<el-dialog v-model="visible" :title="formData.bookId ? '编辑图书' : '添加图书'"
           width="1200" @close="close">
  <el-form
      ref="bookFormRef"
      :model="formData"
      :rules="rules"
      label-width="100px"
      label-position="right"
      size="default"
  >
    <!-- 第一行：书名和作者 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="书名" prop="title">
          <el-input v-model="formData.title" placeholder="请输入书名"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="作者" prop="author">
          <el-input v-model="formData.author" placeholder="请输入作者"/>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第二行：ISBN 和出版社 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="ISBN" prop="isbn">
          <el-input v-model="formData.isbn" placeholder="请输入ISBN"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="出版社" prop="publisher">
          <el-input v-model="formData.publisher" placeholder="请输入出版社"/>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第三行：出版年份和语言 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="出版年份" prop="publicationYear">
          <el-input-number
              v-model="formData.publicationYear"
              :min="1900"
              :max="new Date().getFullYear()"
              placeholder="请输入出版年份"
              style="width: 100%;"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="语言" prop="language">
          <el-select v-model="formData.language" placeholder="请选择语言">
            <el-option label="中文" value="中文"/>
            <el-option label="英文" value="英文"/>
            <el-option label="法文" value="法文"/>
            <el-option label="日文" value="日文"/>
            <el-option label="德文" value="德文"/>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第四行：类别和馆藏位置 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="类别" prop="categoryId">
          <el-select v-model="formData.categoryId" placeholder="请选择类别">
            <el-option
                v-for="category in categories"
                :key="category.categoryId"
                :label="category.categoryName"
                :value="category.categoryId"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="馆藏位置" prop="location">
          <el-select v-model="formData.location" placeholder="请选择馆藏位置">
            <el-option label="理科1室" value="理科1室"/>
            <el-option label="理科2室" value="理科2室"/>
            <el-option label="文科1室" value="文科1室"/>
            <el-option label="文科2室" value="文科2室"/>
            <el-option label="珍藏室" value="珍藏室"/>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第五行：副本数和可借数 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="副本数" prop="totalCopies">
          <el-input-number
              v-model="formData.totalCopies"
              :min="1"
              placeholder="请输入副本数"
              style="width: 100%;"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="可借数" prop="availableCopies">
          <el-input-number
              v-model="formData.availableCopies"
              :min="0"
              :max="formData.totalCopies"
              placeholder="请输入可借数"
              style="width: 100%;"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 图书状态 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="图书状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">在馆</el-radio>
            <el-radio :label="2">外借</el-radio>
            <el-radio :label="3">未上架</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 图书简介 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="图书简介" prop="description">
          <el-input
              v-model="formData.description"
              type="textarea"
              :rows="3"
              placeholder="请输入图书简介"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 封面上传 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="封面上传">
          <image-upload :fileUrl="formData.coverUrl"
                        @upload-success="handleCoverUpload"
                        @delete-success="handleCoverDelete">
          </image-upload>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 附件上传 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="附件上传">
          <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :on-success="handleAttachmentUpload"
              :on-remove="handleAttachmentDelete"
              :file-list="fileList"
              :before-upload="beforeAttachmentUpload"
              accept=".pdf, .docx, .zip, .rar"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">只能上传 PDF/DOCX 文件，且不超过 50MB</div>
            </template>
          </el-upload>
          <!-- 附件预览和下载链接 -->
          <div v-if="fileList && fileList.length > 0" class="attachment-preview">
            <a :href="fileList[0].url" target="_blank">预览附件</a>
            <a :href="fileList[0].url" download>下载附件</a>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <template #footer>
    <div style="text-align: right; padding: 10px;">
      <el-button @click="resetForm">重置</el-button>
      <el-button type="primary" @click="submitForm">{{formData.bookId ? '更新图书' : '添加图书'}}</el-button>
    </div>
  </template>
</el-dialog>
</body>
</html>